<template>
  <div class="login">
    <div class="form">
      <div class="title"><h1>智慧点餐登陆</h1></div>
      <el-form :model="formData" :rules="rules" ref="formRef">
        <!-- 账号 -->
        <el-form-item prop="account">
          <el-input v-model="formData.account" placeholder="请输入账号" >
            <template #prefix>
              <el-icon><UserFilled /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码" type="password">
            <template #prefix>
              <i class="iconfont icon-lock-full"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <!-- type="primary 蓝色 -->
          <el-button type="primary" style="width:100%" @click="login">立即登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios'
import { ref, reactive } from 'vue'
import { UserFilled } from '@element-plus/icons-vue'
import {checkLogin} from '@/api/account'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
// import userStore from '@/stores/userStore'
const formRef = ref(null);
// 自定义效验
//触发的校验事件函数
const checkAccount = (rule, value, callback) => {
   //rule :整个input的所有的规则  
  //value:当前input的值
  //callback:回调函数，如果校验通过，callback() ，  必须只要写一次验证通过
  //        校验不通过，callback(new Error('错误信息'))
  const reg = /^([a-z]|[0-9]){3,11}$/;
  if (!reg.test(value)) {
    callback(new Error('账号长度为3-11位'))
  } else {
    callback()
  }
}
const checkPassword = (rule, value, callback) => {
  const reg = /^([a-z]|[0-9]){5,11}$/;
  if (!reg.test(value)) {
    callback(new Error('密码长度为5-11位'))
  } else {
    callback()
  }
}
const rules = reactive({
  account:[
    { validator: checkAccount, message: '请输入账号', trigger: 'blur' }
  ],
  password:[
    { validator: checkPassword, message: '请输入密码', trigger: 'blur' }
  ]
})


// element-plus 提供的表单验证
// const rules = reactive({
//   account:[
//     { required: true, message: 'Please input Activity name', trigger: 'blur' },
//     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
//   ],
//   password:[
//     { required: true, message: 'Please input Activity name', trigger: 'blur' },
//     { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
//   ]
// })
const formData = reactive({
  account: '',
  password: ''
})
const router = useRouter()
// 三层封装

// 调用层
// const login =  async()=>{
// 登录表单验证
// if(!formData.account || !formData.password){
//   ElMessage.error('账号或密码不能为空')
//   return;
// }
// const userStore = u
// 触发表单验证
const login = async () => {
  formRef.value.validate(async (res) => {
    if (res) {
      let { code, msg,id,token,role } = await checkLogin(formData);
      sessionStorage.setItem('user', JSON.stringify({id,token,role}));
      if (code === 0) {
        ElMessage.success(msg);
        router.push('/home');
      } else {
        ElMessage.error(msg);
      }
    }
  });
};

  // 异步转同步
//   let {code,msg} = await checkLogin(formData);

//   if(code ==0){
//     ElMessage.success(msg)
//     router.push('/home')
//   }else{
//     ElMessage.error(msg)
//   }
// }
// const login = () => {
//   checkLogin(formData).then(res => {
//     console.log(res);
//     if(res.code === 0){
//       ElMessage.success(res.msg);
//       router.push('/home');
//     }else{
//       ElMessage.error(res.msg)
//     }
//   }).catch(err => {
//     console.log(err)
//   })
// }


// 普通用法
// const login = () => {
//   axios.post('http://8.137.157.16:9002/users/checkLogin', formData).then(res => {
//     console.log(res);
//   }).catch(err => {
//     console.log(err)
//   })
// }
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  position: relative;
  .form{
    width: 400px;
    height: 246px;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    i{
      font-size: 12px;
      color: #fff;
    }
    .title{
      width: 400px;
      height: 28px;
      h1{
        color: #fff;
      font-size: 28px;
      }
      text-align: center;
      margin-bottom: 20px;
    }
  }
}
.el-form-item{
  margin-bottom: 42px;
}
:deep(.el-input__wrapper){
  // 设置透明色
  // background-color: rgba(0,0,0,0);
  background-color: transparent;
}
:deep(.el-input__inner){
  color: #fff;
}
</style>